<template>
    <view class="item bg-white radius-lg padding-sm crow">
        <view class="left avatar margin-left-sm">
            <image :src="item.headimg" lazy-load mode="" class="img"></image>
            <image src="@/static/image/parter/title/title-1.gif" v-if="item.headimg_decoration === 1" mode=""
                class="title-img"></image>
            <image src="@/static/image/parter/title/title-2.gif" v-else-if="item.headimg_decoration === 2" mode=""
                class="title-img"></image>
            <image src="@/static/image/parter/title/title-3.gif" v-else-if="item.headimg_decoration === 3" mode=""
                class="title-img"></image>
            <image src="@/static/image/parter/title/title-4.gif" v-else-if="item.headimg_decoration === 4" mode=""
                class="title-img"></image>
        </view>
        <view class="right">
            <view class="top crow space-between">
                <view class="left-box">
                    <text class="padding-right-mn text-black text-bold">{{ item.nickname }}</text>
                    <text :class="item.is_collect ? 'text-red cuIcon-likefill' : 'cuIcon-like'" @tap="collect()"></text>
                </view>
                <view class="status crow radius">
                    <view class="zuizao">
                        最早可约
                    </view>
                    <view class="time">
                        {{ item.appointment_time }}
                    </view>
                </view>
            </view>
            <view class="center text-sm text-gray crow space-between">
                <view class="left-box">
                    <text class="cuIcon-shop" v-if="item.shop_id"></text>
                    <text class="padding-left-mn">{{ item.shop_title }}</text>
                </view>
                <view class="right-box crow" v-if="item.distance_text">
                    <u-icon name="map" size="15" color="gray"></u-icon>
                    {{ item.distance_text }}
                </view>
            </view>
            <view class="bottom text-gray text-sm crow space-between">
                <view class="crow">
                    <view class="solid-right padding-right">
                        <text class="cuIcon-form themeColor"></text>{{ item.order_num }}
                    </view>
                    <view class="solid-right padding-lr">
                        <text class="cuIcon-friend themeColor"></text>{{ item.people_num }}
                    </view>
                    <view class="padding-left">
                        <text class="cuIcon-message themeColor"></text>{{ item.comment_num }}
                    </view>
                </view>
                <view class="right-box">
                    <view @click="$utils.$page.open('/pages/technician/details?id=' + item.technician_id)">
                        <button class="cu-btn china-btn-bg round sm">立即预约</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

export default {
    props: {
        item: {
            type: Object,
            default: () => { },
        }
    },
    methods: {
        collect() {
            this.$utils.$api.Collect.technician(this.item.technician_id).then((data) => {
                item.is_collect = data.state;
            }).catch(err => {
                this.$utils.$message.error(err.msg);
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.item {
    height: 200upx;

    .avatar {
        position: relative;
        width: 170upx;
        height: 170upx;
        display: flex;
        align-items: center;

        .img {
            width: 130upx;
            height: 130upx;
            border-radius: 50%;
        }

        .title-img {
            width: 210upx;
            height: 175upx;
            position: absolute;
            left: -20rpx;
        }
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 150upx;

        .top {
            .status {
                border: 2rpx solid var(--theme-color);
                font-size: 20rpx;

                .zuizao {
                    background-color: var(--theme-color);
                    padding: 5rpx;
                    border-top-right-radius: 10rpx;
                    border-bottom-right-radius: 10rpx;
                    color: white;
                }

                .time {
                    padding: 5rpx;
                }
            }
        }
    }
}
</style>